<!DOCTYPE html>
<html>
    <head>
        
        <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="js/highcharts.js" type="text/javascript"></script>
        <script src="graph.js" type="text/javascript"></script>
        <script src ="js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
        <style type="text/css">
      
            div.centerbox-outer{
    margin: 0 auto;
    float: left;
    left: 50%;
    position: relative;
}

div.centerbox-inner{
    text-align: justify;
   
    float: left;
    position: relative;
    right: 50%;
}
            
            .center {
    margin-left: auto; 
 margin-right: auto;
 width: 650px;

                
            }
            
        </style>
        <script type="text/javascript">
    
      
         
        
    
        $(function() {
            //populate the select
            $.get('getDomain.php', function(data) {
       
                var dataArray = $.parseJSON(data);
               
                for (var i=0;i<dataArray.length;i++) {
                    $('#domain').append('<option value="' + dataArray[i].id + '">' + dataArray[i].domainName + '</option>');
                }
                //set selected to CS
                $('#domain option').eq(1).attr('selected', 'selected');
                populateSubDomain(2);
            });
            
            $('#domain').change( function() {
                populateSubDomain($('#domain :selected').val());
            });
    
       
            addAutocomplete('firstOrg');
            addAutocomplete('secondOrg');
    
        });
         
         function addAutocomplete (inputId) {
               $("#"+inputId).autocomplete({
                    source: function( request, response ) {
                    $.ajax({
                        url: "getOrg.php",
                        dataType: "json",
			data: {
                            term: request.term
                        },		
                        success: function( data ) {
                            response( $.map( data, function( item ) {
				return {
                                    label: item.value,
                                    value: item.value,
                                    id: item.id			}
				}));
                        }
                    });
                    },
                    minLength: 3,
                    select: function( event, ui ) {
                         $("#"+inputId).data("id",ui.item.id);
                    }
            });
         
         }
    
        function populateSubDomain(topDomain) {
            $.get('getSubDomain.php', {domainID: topDomain}, function(data) {
                 var dataArray = $.parseJSON(data);
                  $('#subDomain').html('');
                 $('#subDomain').append('<option value="0">Overall</option>');
                 for (var i=0;i<dataArray.length;i++) {
                    $('#subDomain').append('<option value="' + dataArray[i].subDomainID + '">' + dataArray[i].subDomainName + '</option>');
                 }
                   $('#subDomain option').eq(0).attr('selected', 'selected');
            });
        }
    
        function getPub(firstID,secondID,firstOrg,secondOrg) {
            $('#loadingImg').show();
            $('#container').html('')
            $('#container2').html('')
            var domainID = $('#domain :selected').val();
            var subDomainID = $('#subDomain :selected').val();
            $.get('MAS.php', {firstID : firstID, secondID: secondID, domainID: domainID, subDomainID: subDomainID}  ,function(data) {
                 //alert(data);
                 var dataArray = $.parseJSON(data);
                 var title = 'Publications per Year, Normalized by Authors';
                 makeGraph('container',firstOrg,secondOrg,dataArray.firstSchoolNorm, dataArray.secondSchoolNorm, title);
                 title = 'Publications per Year';
                 makeGraph('container2',firstOrg,secondOrg,dataArray.firstSchool, dataArray.secondSchool, title);
                  $('#loadingImg').hide();
            });
        }
        
        function graphIt() {
            getPub($("#firstOrg").data('id'), $("#secondOrg").data('id'), 
                $("#firstOrg").val(), $("#secondOrg").val());
        }

        </script>
        
    </head>
    
    <body>
      
        <div id="topDiv"  class="center" >
            <div align="center">
           
                    <div id="selectDiv" style="" >
                        <div id="domainDiv" style="float: left; width: 277px;">
                            <select id="domain"></select>
                        </div>
                        
                        <div id="subDomainDiv" style="float: left; width: 277px; margin-left: 55px">
                            <select id="subDomain"></select>
                        </div>
                    </div>
             
                    <div id="searchDiv"  style="clear: both">
                        <div id="firstOrgLivesearch" style="float: left; width: 277px; " >
                            <input id="firstOrg" type="text" size="40" maxlength="40"/>
                            
                          
                        </div>
                        <button type="button" style="float: left; margin-left: 10px; margin-right: 10px;" onclick="graphIt()" >Go</button>
                        <div id="secondOrgLivesearch" style="float: left; width: 276px" >
                            <input id="secondOrg" type="text" size="40" maxlength="40"/>
                            
                   
                            
                        </div>
                    </div>
                    <div id="imageDiv"  style="clear: both;     margin-left: auto; 
 margin-right: auto;
 width: 100%">
                      <img id="loadingImg"   style="display: none" src="loading.gif"/>    
                    </div>
                </div>
        </div>
            
                    <div id="graphs" align="center" style="clear: both;  margin-left: auto; 
                        margin-right: auto;  width: 80%;">
                        
                      
                        
                        <div ID="container"></div>
                        <div ID="container2"></div>
                    </div>
     
   
       
    </body>
    
</html>